<template>
  <div>
    <el-table
      :data="warnList"
      style="width: 100%;"
    >
      <el-table-column width="100">
        <template slot-scope="scope">
          <span v-if="(!scope.row.greater || scope.row.greater==='') && scope.row.less && scope.row.less!=='' "> {{ $t('less') }}{{ scope.row.less }}</span>
          <span v-else-if="(!scope.row.less || scope.row.less==='') && scope.row.greater && scope.row.greater!=='' "> {{ $t('greater') }}{{ scope.row.greater }}</span>
          <span v-else>
            <span v-if="scope.row.less && scope.row.greater && scope.row.less!=='' && scope.row.greater!==''">
              <span v-if="parseFloat(scope.row.less) < parseFloat(scope.row.greater)">{{ $t('less') }}{{ scope.row.less }} {{ $t('or') }} {{ $t('greater') }}{{ scope.row.greater }}</span>
              <span v-else-if="scope.row.less === scope.row.greater"> {{ $t('equal') }}{{ scope.row.less }}</span>
              <span v-else="">{{ $t('between') }}{{ scope.row.greater }} ~ {{ scope.row.less }}</span>
            </span>
          </span>
          <span v-if="scope.row.equal && scope.row.equal!=='' "> {{ $t('equal') }}{{ scope.row.equal }}</span>
          <span v-if="scope.row.different && scope.row.different!=='' "> {{ $t('different') }}{{ scope.row.different }}</span>
          <span v-if="scope.row.wave && scope.row.wave!=='' "> {{ $t('wave') }}{{ $t('greater') }}{{ scope.row.wave }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('grade')" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.grade"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('less')" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.less"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('equal')" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.equal"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('different')" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.different"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('greater')" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.greater"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('wave')" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.wave"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('subscript')" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.valueSubscript"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('script')" width="100">
        <template slot-scope="scope">
          <el-select v-model="scope.row.templateEvalId">
            <el-option
              v-for="item in productTemplateExplainWarnEvalList"
              :key="item.templateEvalId"
              :label="item.name"
              :value="item.templateEvalId"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column :label="$t('startDate')" width="120">
        <template slot-scope="scope">
          <el-time-picker
            v-model="scope.row.dayStartTime"
            value-format="HH:mm:ss"
            arrow-control
            style="width: 110px"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('endDate')" width="120">
        <template slot-scope="scope">
          <el-time-picker
            v-model="scope.row.dayEndTime"
            value-format="HH:mm:ss"
            arrow-control
            style="width: 110px"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('remark')" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.remark"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('only')+$t('once')" width="100">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.onlyOnce" />
        </template>
      </el-table-column>

      <el-table-column width="180" fixed="right">
        <template slot="header">
          <el-button
            type="primary"
            icon="el-icon-plus"
            style="float: right"
            @click="add"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.warnId !== 0"
            type="primary"
            @click="update(scope.row)"
          >{{ $t('save') }}
          </el-button>
          <el-button
            v-if="!scope.row.isAdd && scope.row.warnId !== 0"
            type="danger"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  successNotice
} from '@/util/common'
import {
  listDeviceExplainConfigWarnAll,
  insertDeviceExplainConfigWarn,
  updateDeviceExplainConfigWarn,
  deleteDeviceExplainConfigWarn
} from '@/api/iot/iotDeviceExplainConfigWarnApi'
import { listProductTemplateExplainWarnEval } from '@/api/iot/iotProductTemplateExplainWarnEvalApi'
export default {
  name: 'DeviceExplainConfigWarn',
  props: {
    explainId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      warnList: [],
      productTemplateExplainWarnEvalList: []
    }
  },
  created() {
    this.listProductTemplateExplainWarnEval()
    this.listDeviceExplainConfigWarnAll()
  },
  methods: {
    listProductTemplateExplainWarnEval() {
      listProductTemplateExplainWarnEval({
        explainId: this.explainId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.productTemplateExplainWarnEvalList = data
        } else {
          this.productTemplateExplainWarnEvalList = []
        }
        this.productTemplateExplainWarnEvalList.unshift({
          templateEvalId: 0,
          name: this.$t('empty')
        })
      })
    },
    listDeviceExplainConfigWarnAll() {
      listDeviceExplainConfigWarnAll({
        explainId: this.explainId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.warnList = data
        } else {
          this.warnList = []
        }
      })
    },
    add() {
      for (let i = 0, j = this.warnList.length; i < j; i++) {
        if (this.warnList[i].isAdd) {
          return
        }
      }
      const item = {
        explainId: this.explainId,
        isAdd: true,
        dayStartTime: '00:00:00',
        dayEndTime: '00:00:00'
      }
      this.warnList.push(item)
    },
    update(item) {
      if (item.isAdd) {
        insertDeviceExplainConfigWarn(item).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listDeviceExplainConfigWarnAll()
        })
      } else {
        updateDeviceExplainConfigWarn(item).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listDeviceExplainConfigWarnAll()
        })
      }
    }, del(item) {
      const that = this
      this.$confirm(this.$t('delete'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceExplainConfigWarn({
            warnId: item.warnId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listDeviceExplainConfigWarnAll()
          })
        })
    }
  }
}
</script>

